<!--
 * @Description: 直播场次
 * @Autor: dyx
 * @Date: 2023-02-01 09:53:22
 * @LastEditTime: 2023-02-06 16:38:31
-->
<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main">
      <div class="JADP-common-page-header">
        <el-page-header @back="goBack" content="直播场次"> </el-page-header>
      </div>
      <div class="JADP-common-layout-main JADP-flex-main">
        <div class="JADP-common-head">
          <el-button-group>
            <el-button
              type="success"
              icon="el-icon-plus"
              style="height: 36px;"
              @click="addOrUpdateHandle()"
              >添加场次
            </el-button>
            <el-button icon="icon-ym icon-ym-Refresh JADP-common-head-icon">
            </el-button>
          </el-button-group>
          <div></div>
        </div>
        <el-table :data="list" style="width: 100%">
          <el-table-column type="expand">
            <template v-slot="{ row }">
              <div class="expands">
                <p>推流地址：{{ row.streamaddress }}</p>
                <p>
                  <el-button type="primary" v-copy="copyKey(row.streamaddress)"
                    >复制串流密钥</el-button
                  ><el-button plain type="primary" v-copy="row.streamaddress"
                    >复制完整推流地址</el-button
                  >
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="场次名称" prop="sitename"> </el-table-column>
          <el-table-column label="回看" prop="desc">
            <template>
              <span v-if="lookBack">
                <el-button>观看</el-button>
              </span>
              <span v-else>未设置</span>
            </template>
          </el-table-column>
          <el-table-column label="开始时间" prop="starttime">
            <template v-slot="{ row }">
              {{ row.starttime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="直播时长" prop="duration"> </el-table-column>
          <el-table-column label="观看人数" prop="watchNum"> </el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="{ row }">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="addOrUpdateHandle(row)"
              ></el-button>
              <el-button type="primary" icon="el-icon-view" circle></el-button>
              <el-button
                type="success"
                icon="el-icon-chat-dot-square"
                circle
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="handleDel(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <AddChangci
        v-if="formVisible"
        ref="addNumberOfGames"
        :dataFormId="dataFormId"
        :list="list"
        @refresh="refresh"
      />
    </div>
  </transition>
</template>
<script>
import AddChangci from "./addChangCi";
import request from "@/utils/request";
export default {
  name: "changci",
  components: {
    AddChangci
  },
  data() {
    return {
      listLoading: false,
      formVisible: false,
      list: [],
      dataFormId: "",
      lookBack: ""
    };
  },
  computed: {
    copyKey() {
      return row => {
        let keyArr = row.split("/");
        return keyArr[keyArr.length - 1];
      };
    }
  },
  methods: {
    goBack() {
      this.$emit("refresh", true);
    },
    addOrUpdateHandle(row) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.addNumberOfGames.init(row);
      });
    },
    refresh(isrRefresh) {
      this.formVisible = false;
      if (isrRefresh) this.init(this.dataFormId);
    },
    init(id) {
      this.loading = true;
      this.dataFormId = id;
      request({
        url: "/api/xy_zb_base_info/Xy_zb_base_info/" + id,
        method: "get"
      }).then(res => {
        this.list = res.data.xy_zb_siteEntityList;
        console.log(res.data, 123);
        this.lookBack =
          res.data.recordvideo == "000e9a8c0c564a82a9cc5af8d80c6f20" ? 1 : 0;
        this.loading = false;
      });
    },
    reset() {
      this.init();
    },
    handleDel(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        type: "warning"
      })
        .then(() => {
          let index = this.list.findIndex(item => item.id === row.id);
          this.list.splice(index, 1);
          let form = {
            xy_zb_siteEntityList: this.list
          };
          request({
            url: "/api/xy_zb_base_info/Xy_zb_base_info/" + this.dataFormId,
            method: "PUT",
            data: form
          }).then(res => {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1000
            });
            this.init(this.dataFormId);
          });
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped lang="scss">
.expands {
  padding-left: 30px;
  & > p {
    margin: 5px 0;
    font-size: 15px;
  }
}
</style>
